<!--
 * @Descripttion: 
 * @version: @ 1.0.0
 * @Author: 朱江洲
 * @Date: 2022-05-20 17:05:47
 * @LastEditors: 朱江洲
 * @LastEditTime: 2022-05-31 17:03:29
-->
<template>
  <div class="remind">
    <div class="title">
      <span>预警提醒</span>
      <!-- <span v-if="!disabled"><i class="iconfont icon-shanchu"></i></span> -->
    </div>
    <div class="remind-content">
      <div class="remindDetail">
        <div class="detailImg">
          <img src="../../../assets/images/soonQual.png" alt="" />
        </div>
        <div class="detailData">
          <div class="dataNum">{{ data.qualDueSoon }}</div>
          <div class="dataSize">即将到期资质</div>
        </div>
      </div>
      <div class="remindDetail">
        <div class="detailImg">
          <img src="../../../assets/images/soonCert.png" alt="" />
        </div>
        <div class="detailData">
          <div class="dataNum">{{ data.certDueSoon }}</div>
          <div class="dataSize">即将到期证书</div>
        </div>
      </div>
      <div class="remindDetail">
        <div class="detailImg">
          <img src="../../../assets/images/expireQual.png" alt="" />
        </div>
        <div class="detailData">
          <div class="dataNum">{{ data.qualOverdue }}</div>
          <div class="dataSize">已过期资质</div>
        </div>
      </div>
      <div class="remindDetail">
        <div class="detailImg">
          <img src="../../../assets/images/exprieCert.png" alt="" />
        </div>
        <div class="detailData">
          <div class="dataNum">{{ data.certOverdue }}</div>
          <div class="dataSize">已过期证书</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { certificateAlert } from "@/api/index";
export default {
  props: {
    disabled: {
      type: Boolean,
      required: true,
    },
    briTime: {
      type: Number,
      required: true,
    },
    briUser: {
      type: Number,
      required: true,
    },
    userIds: {
      type: Array,
      required: true,
    },
    timeVal: {
      type: Array,
      required: true,
    },
  },
  watch: {
    briTime(newValue, oldValue) {
      if (newValue !== 0) {
        this.getCertificateAlert();
      }
    },
    briUser(newValue, oldValue) {
      if (newValue !== 0) {
        this.getCertificateAlert();
      }
    },
    userIds: {
      deep: true,
      handler(val) {
        if (val.length !== 0) {
          this.getCertificateAlert();
        }
      },
    },
    timeVal: {
      deep: true,
      handler(val) {
        if (val.length !== 0) {
          this.getCertificateAlert();
        }
      },
    },
  },
  data() {
    return {
      data: {},
    };
  },
  created() {
    this.getCertificateAlert();
  },
  methods: {
    getCertificateAlert() {
      certificateAlert({
        type: this.briUser,
        timeUnit: this.briTime,
        times: this.timeVal,
        userIds: this.userIds,
      }).then((res) => {
        this.data = res;
      });
    },
  },
};
</script>

<style lang="less" scoped>
.remind {
  width: 584px;
  height: 390px;
  background: #ffffff;
  border-radius: 8px;
  padding: 24px;
  .title {
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #2b2b2b;
    display: flex;
    justify-content: space-between;
  }
  .remind-content {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 34px;
    .remindDetail {
      display: flex;
      align-items: center;
      width: 256px;
      height: 134px;
      background: #f8f9fb;
      border-radius: 8px;
      padding-left: 24px;
      .dataNum {
        font-size: 22px;
        font-family: DINAlternate-Bold, DINAlternate;
        font-weight: bold;
        color: #2b2b2b;
      }
      .dataSize {
        margin-top: 4px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #999999;
      }
      .detailImg {
        margin-right: 22px;
        width: 70px;
        height: 70px;
        border-radius: 12px;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    .remindDetail:nth-child(n + 3) {
      margin-top: 24px;
    }
  }
}
</style>